import React, { Component } from 'react'
import {View, Text, StatusBar, TextInput, Image, StyleSheet, Button,SafeAreaView} from 'react-native'
import {pxTodp} from '../utiles/tools'
import {
  CodeField,
  Cursor,
} from 'react-native-confirmation-code-field';
  
const styles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: 'center', fontSize: 30},
  codeFieldRoot: {marginTop: 20},
  cell: {
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderBottomWidth: 2,
    borderColor: '#00000030',
    textAlign: 'center',
  },
  focusCell: {
    borderColor: '#000',
  },
});
 
export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text:'',
      verify:false,  //验证码界面是否显示
      yanzhen:'',    //验证码
      time:'',
      timeOut:false
    }
  }
  handChange = (text) => {
    console.log(text)
    this.setState({
      text
    })
  }
  handSubmit = () => {
    console.log(this.state.text)
    alert('已发送至您手机')
    //变换到验证码页面
    this.setState({
      verify:true
    })
    //倒计时
    this.jishi()
  }
  //按钮倒计时
  jishi = function () {
    let num = 20;
    let timer = setInterval(()=>{
      num--
      //按钮名字
      this.setState({
        time:`登陆（${num}s后验证码失效）`
      })
      //timeout为false
      this.setState({
        timeOut:false
      })
      if(num == 0) {
        this.setState({
          time:`重新获取验证码`
        })
        this.setState({
          timeOut:true
        })
        clearInterval(timer)
      }
    },1000)
  }
  //手机号码
  handVertify = (text)=> {
    this.setState({
      yanzhen:text
    })
  }
    //手机登陆
   Phone = () => {
    return(
      <View>
        <View>
           <TextInput style={{borderBottomWidth:1,width:'80%',marginLeft:30}}
                      placeholder="请输入手机号登陆" 
                      maxLength={11}
                      keyboardType='phone-pad'
                      value={this.state.text}
                      // onchange不能拿到数据
                      onChangeText={this.handChange} 
                      onSubmitEditing={this.handSubmit}            
           />
           {/* <Text>{this.state.text}</Text> */} 
         </View>
         <View style={{marginTop:20,width:'80%',marginLeft:30,borderRadius:30,overflow:'hidden'}}>
           <Button title="获取验证码" style={{height:20,width:'80%',borderRadius:20}} onPress={this.handSubmit} ></Button>
         </View>
      </View>
    )
  }
    //验证码
   Yanzheng = () => {
     return(
       <View>
         <Text style={{fontSize:20}}>输入6位验证码</Text>
         <Text >已发送至+86{'  '}{this.state.text}</Text>
         <View style={{width:'80%',marginLeft:30}}>
         <CodeField
            value={this.state.yanzhen}
            onChangeText={this.handVertify}
            cellCount={6}
            rootStyle={styles.codeFieldRoot}
            keyboardType="number-pad"
            textContentType="oneTimeCode"
            renderCell={({index, symbol, isFocused}) => (
              <Text
                key={index}
                style={[styles.cell, isFocused && styles.focusCell]}
                >
                {symbol || (isFocused ? <Cursor /> : null)}
              </Text>
            )}
          />
         </View>
         <View style={{marginTop:20,width:'80%',marginLeft:30,borderRadius:30,overflow:'hidden'}}>
            <Button title={this.state.time} style={{height:20,width:'80%',borderRadius:20}} onPress={this.handJump} />
         </View>
       </View>
     )
   }
   //登陆或者重新获取验证码
   handJump = () => {
     //结束了点击重新计时
    if(this.state.timeOut) {
      this.jishi()
    }else{
      if(this.state.yanzhen == '000000') {
        alert('成功')
        //跳转到首页路由
        this.props.navigation.push('Person');
      }else{
        alert('输入有误，请重新输入！')
        //清空yanzhen
        this.setState({
          yanzhen:''
        })
      }
    }
   }
  render() {
    return (
     <View>
       <Image source={require('../assets/img/a.jpeg')} style={{width:'100%'}} ></Image>
       <View style={{margin:20}}>
         <Text style={{fontSize:20,fontWeight:'bold',color:'#888',textAlign:'center'}}>欢迎使用!</Text>
       </View>
       {/* 表单区域 */}
       {this.state.verify == true? this.Yanzheng(): this.Phone()}
     </View> 
    )
  }
}

